<template>
  <div class="home">
    <HelloWorld :propsMsg="propsMsg">
      <template #backBtn>
        <router-link to="/setup">
          <el-button type="primary" plain>Setup</el-button>
        </router-link>
      </template>
    </HelloWorld>
    <h2>HelloWorld Input</h2>
    <input v-model="myInput" />
    <h2>Conputed String</h2>
    <input v-model="firstInput" />
    <input v-model="secondInput" />
    <div>{{ state.total }}</div>
    <h2>Conputed Object</h2>
    <input v-model="state.first" />
    <input v-model="state.second" />
    <div>total：{{ state.total2 }}</div>
    <div>doubleCount：{{ doubleCount }}</div>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
import { reactive, ref, watchEffect, watch, provide, computed } from 'vue'
import setupTest from '@/composition/setup'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  setup() {
    const { propsMsg, myInput } = setupTest()
    propsMsg.name = ' World'
    const firstInput = ref()
    const secondInput = ref()
    const state = reactive({
      first: 0,
      second: 0,
      total: 0,
      total2: 0
    })
    watchEffect(() => {
      state.total = firstInput.value + secondInput.value
      state.total2 = parseInt(state.first) + parseInt(state.second)
    })
    watch([firstInput, secondInput], (newValues, prevValues) => {
      console.log(firstInput.value, secondInput.value, newValues, prevValues)
    })
    const doubleCount = computed({
      get() {
        return state.total2 * 2
      },
      set(newVal) {
        state.total2 = newVal / 2
      }
    })
    provide('provideData', 'provide data from home')
    return {
      propsMsg,
      myInput,
      firstInput,
      secondInput,
      state,
      doubleCount
    }
  }
}
</script>
<style lang="scss">
.home {
  margin: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  text-align: left;
  h2 {
    margin: 10px 0;
  }
}
</style>
